<template>
  <div>
    <el-row>
      <el-col :span="6"><div >【题型】:{{addDateList.questionType|topic}}</div></el-col>
      <el-col :span="6"><div>【编号】:{{addDateList.id}}</div></el-col>
      <el-col :span="6"><div >【难度】:{{addDateList.difficulty|Difficulty}}</div></el-col>
      <el-col :span="6"><div>【标签】:{{addDateList.tags}}</div></el-col>
    </el-row>
    <el-row style="margin-top:15px">
      <el-col :span="6"><div>【学科】:{{addDateList.subjectName}}</div></el-col>
      <el-col :span="6"><div>【目录】:{{addDateList.directoryName}}</div></el-col>
      <el-col :span="6"><div>【方向】:{{addDateList.direction}}</div></el-col>
      <el-col :span="6"><div></div></el-col>
    </el-row>
    <hr>
【题干】：<div  v-html="addDateList.question" style="color:blue"></div>
         <div v-if="addDateList.questionType!==3">
          <div style="padding-bottom:5px">{{addDateList.questionType|topic}} 选项：（以下选中的选项为正确答案）</div>
          <div v-for="item in addDateList.options" :key="item.id" style="padding:8px 0">
            <el-radio v-if="addDateList.questionType==='1'" :value="item.isRight" :label="1">{{item.title}}</el-radio>
            <el-checkbox   v-if="addDateList.questionType==='2'" :value="item.isRight?true:false">{{item.title}}</el-checkbox>
          </div>
        </div>
        <hr/>
【参考答案】：<el-button type="danger" size="small" @click="preivewVideo">视频答案预览</el-button>
      <div class="video" v-show="play">
        <video ref="video"  controls>
        <img :src="addDateList.videoURL" alt="">
        </video>
      </div>
<hr/>
<el-row style="margin-top:15px;">
  <el-col :span="23"><div style="display:flex"><p>【答案解析】:</p><div v-html="addDateList. answer"></div></div></el-col>
</el-row>
<hr/>
<el-row style="margin-top:15px">
  <el-col :span="3"><div>【题目备注】:</div></el-col>
  <el-col :span="32"><div>http://hmmm.itheima.net/#/questions/choice</div></el-col>
</el-row>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
import { questionType, difficulty } from '@/api/hmmm/constants.js'

export default {
  filters: {
    topic (value) {
      if (value) return questionType.find(item => item.value === +value).label + '题'
    },
    Difficulty (value) {
      if (value) return difficulty.find(item => item.value === +value).label
    }
  },
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      radio: '1',
      addDateList: [],
      play: false
    }
  },
  created () {
    this.loaddetail()
  },
  methods: {
    // 拿到弹窗的数据进行渲染
    async loaddetail () {
      try {
        const res = await detail({ id: this.id })
        // console.log('res', res)
        this.addDateList = res.data
        console.log(this.addDateList)
        // 保存数据
      } catch (err) {
        console.log('', err)
      }
    },
    preivewVideo () {
      this.play = true
      this.$refs.video.play()
    }
  }
}
</script>

<style scoped lang='scss'>
.video{
  width: 50%;
  height: 30%;
}
</style>